<!-- user表单弹窗 -->
<form id="user-form" lay-filter="user-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入名称" type="text" class="layui-input" maxlength="20" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <select name="dbType" lay-verify="required">
                <option value="mysql">mysql</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">IP地址</label>
        <div class="layui-input-block">
            <input name="host" placeholder="请输入主机/ip地址" type="text" class="layui-input" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">端口</label>
        <div class="layui-input-block">
            <input name="port" placeholder="请输入端口号" type="text" class="layui-input" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数据库</label>
        <div class="layui-input-block">
            <input name="db" placeholder="请输入数据库" type="text" class="layui-input" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">使用SSL</label>
        <div class="layui-input-block">
            <select name="useSSL" class="layui-input" lay-verify="required">
                <option value="false">否</option>
                <option value="true">是</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input name="username" placeholder="请输入账号" type="text" class="layui-input" lay-verify="required" autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input name="password" placeholder="请输入密码" type="password" class="layui-input" lay-verify="required" autocomplete="new-passwrod"/>
        </div>
    </div>

    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary close" type="button">取消</button>
        <button class="layui-btn layui-btn-normal" lay-filter="user-form-test" lay-submit>测试连接</button>
        <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'crown', 'form'], function () {
        var layer = layui.layer;
        var crown = layui.crown;
        var form = layui.form;

        var user = crown.getTempData('t_user');
        if(user){
            form.val('user-form', user);
        }
        form.render();
        // 表单提交事件
        form.on('submit(user-form-test)', function (data) {
            layer.load(2);
            crown.post('/db/test', data.field, function (resp) {
                layer.closeAll('loading');
                if(resp.code !== "0"){
                    layer.msg(resp.msg, {icon: 2});
                }else{
                    layer.msg("连接成功!", {icon: 1});
                }
            });
            return false;
        });
        form.on('submit(user-form-submit)', function (data) {
            layer.load(2);
            if (data.field.id) {
                crown.put('/db/' + data.field.id, data.field, function () {
                    layer.closeAll('loading');
                    layer.msg('修改成功', {icon: 1});
                    crown.finishPopupCenter();
                });
            } else {
                crown.post('/db/create', data.field, function () {
                    layer.closeAll('loading');
                    layer.msg('添加成功', {icon: 1});
                    crown.finishPopupCenter();
                });
            }
            return false;
        });
    });
</script>